<template>
  <div>
    <!-- 头部区域 -->
    <div class="main">
      <el-row :gutter="6" type="flex">
        <el-col :xs="11" :sm="6" :md="4" hidden-sm-onl
          ><div class="grid-content bg-purple">
            <router-link to="/">Mis.X个人博客</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">网站首页</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/"
              >大前端
              <!-- 前端技术目录 -->
              <el-row
                :gutter="16"
                class="directory"
                v-for="(item, index) in naveList"
                :key="index"
              >
                <el-col :md="8"
                  ><router-link :to="item.path1" :key="index">{{
                    item.key1
                  }}</router-link></el-col
                >
                <el-col :md="8"
                  ><router-link :to="item.path2" :key="index">{{
                    item.key2
                  }}</router-link></el-col
                >
                <el-col :md="8"
                  ><router-link :to="item.path3" :key="index">{{
                    item.key3
                  }}</router-link></el-col
                >
              </el-row>
            </router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">旅行日记</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/mysql/2">读书笔记</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/123">摘抄本</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">关于我</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="6" :md="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">链接</router-link>
          </div></el-col
        >
        <el-col :xs="8" :sm="3" :md="6"
          ><div class="grid-content bg-purple">
            <router-link to="/">
              <el-row>
                <el-col :xs="16" :md="18"
                  ><el-input
                    placeholder="请选输入"
                    prefix-icon="el-icon-search"
                    size="mini"
                    v-model="article"
                  >
                  </el-input
                ></el-col>
                <el-col :xs="4" :md="6">
                  <router-link to="/"
                    ><el-button type="warning" size="mini"
                      >搜索</el-button
                    ></router-link
                  ></el-col
                >
              </el-row>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 博文 -->
    <div class="newposts">
      <div class="mains"></div>
      <div class="postsItem">
        <div class="postsItemList">
          <el-row type="flex" justify="space-between">
            <el-col :xs="12"><span class="ItemsR">文章详情</span></el-col>
            <el-col :xs="12"
              ><el-breadcrumb
                separator-class="el-icon-arrow-right"
                class="ItemR"
              >
                <el-breadcrumb-item :to="{ path: '/' }"
                  ><span>您现在位置:首页</span></el-breadcrumb-item
                >
                <el-breadcrumb-item><span>文章详情</span></el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
          </el-row>
          <h2>搜索力：帮你解决90％人生难题的思维能力</h2>
          <div class="author">
            <p></p>
            <p>
              <span>Mis.x</span>
              <span>{{ dates }}</span>
              <span>【我的书评】</span>
              <span>{{ count }}人围观</span>
            </p>
          </div>
          <div class="introduce">
            <span>简介</span>
            {{ title }}
          </div>
          <div class="ItemLeft">
            <!-- markDown语法解析 -->
            <mavon-editor
              class="md"
              :value="gh"
              :subfield="prop.subfield"
              :defaultOpen="prop.defaultOpen"
              :toolbarsFlag="prop.toolbarsFlag"
              :editable="prop.editable"
              :scrollStyle="prop.scrollStyle"
            />
          </div>
          <!-- 网站说明 -->
          <div class="webLinks">
            <b>转载</b
            >：感谢您对肖彬个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，
            非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源高丹个
            人博客”。<a href="http://www.xzwfy.net">http://www.xzwfy.net</a>
            <!-- 点赞 -->
            <div class="admire" @click="essayLike(path)">
              <a href="javascript:;" >很赞哦！ ({{ count }})</a>
            </div>
            <p><span>上一篇</span><router-link to="">李清照</router-link></p>
            <p><span>下一篇</span><router-link to="/">返回列表</router-link></p>
          </div>
          <!-- 相关文章 -->
          <div class="Related">
            <span class="ItemsR">相关文章</span>
            <ul>
              <li v-for="(i, index) in RelatedItem" :key="index">
                <span href="javascript:;">{{ i.name }}</span>
              </li>
            </ul>
          </div>
          <!-- 随机图文 -->
          <div class="Related">
            <span class="ItemsR">随机图文</span>
            <ul class="random">
              <li v-for="(i, index) in randomItems" :key="index">
                <p><img :src="i.imgSrc" alt="" /></p>
                <p>{{ i.title }}</p>
                <p>{{ i.content }}</p>
              </li>
            </ul>
          </div>
          <!-- 文章评论 -->
          <div class="Related">
            <span class="ItemsR">文章评论</span>
            <div v-for="(i, index) in randomItem" :key="index">
              <ul class="comments" v-if="flags >= index">
                <li>
                  <img :src="`${i.Uimg}`" alt="" />
                </li>
                <li>
                  {{ i.input }}<span>{{ i.time }}</span>
                </li>
                <li>{{ i.textarea }}
                   <div v-for="(i2,index) in revertsItme" :key="index">
              <ul class="comments" v-if="revertsItme.length>index&&i.id==i2.id">
                <li>
                  <img :src="`${i2.Uimg}`" alt="" />
                </li>
                <li>
                  {{ i2.input }}<span>{{ i2.time }}</span>
                </li>
                <li>回复楼主：{{ i2.replas}}</li>
                
              </ul>
            </div>

                </li>
                <li>
                  <i
                    class="el-icon-thumb"
                    @click="giveLike(i.id, i.count, index)"
                    >赞:{{ i.count }}</i
                  >
                  <i class="el-icon-chat-line-square" @click="Puckup(index)">{{
                    alt
                  }}</i>
                  <el-row class="reply" ref="reply">
                    <el-col :md="20"
                      ><el-input
                        placeholder="请输入内容"
                        v-model="reverts"
                        clearable
                      >
                      </el-input
                    ></el-col>
                    <el-col :md="4">
                      <el-button
                        type="primary"
                        size="medium"
                        @click="revert(i.id)"
                        >回复</el-button
                      >
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
            <p class="commentsP">
              来说两句吧...<span class="el-icon-chat-round" @click="look">{{
                lookcontent
              }}</span
              ><span>共有{{ randomItem.length }}条评论</span>
            </p>
            <el-row type="flex">
              <el-col :md="2">用户名:</el-col>
              <el-col :md="22"
                ><el-input placeholder="请输入用户名" v-model="input" clearable>
                </el-input
              ></el-col>
            </el-row>
            <el-row type="flex" justify="end">
              <el-col>
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
              </el-col>
            </el-row>

            <el-row style="padding: 0" type="flex" justify="end">
              <el-col :md="2">
                <el-button type="info" @click="UserComment">提交</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="ItemRight">
          <div class="cardSide Ctwo">
            <h2>最近更新</h2>
            <p>
              <router-link to="/"
                ><span>.</span>
                搜索力：帮你解决90％人生难题的思维能力</router-link
              >
            </p>
            <p>
              <router-link to="/"
                ><span>.</span> 品牌设计100+1：100个品牌商标与1</router-link
              >
            </p>
            <p>
              <router-link to="/"
                ><span>.</span>时空角智慧：破解中小企业老板的72个</router-link
              >
            </p>
            <p>
              <router-link to="/"><span>.</span>李清照传</router-link>
            </p>
          </div>
          <div class="cardSide Ctwo">
            <h2>本站推荐</h2>
          </div>
          <div class="cardSide Ctwo">
            <h2>猜你喜欢</h2>
            <p>
              <router-link to="/"
                ><span>.</span> 创业公司股权怎么分配</router-link
              >
            </p>
            <p>
              <router-link to="/"><span>.</span> 刺青</router-link>
            </p>
            <p>
              <router-link to="/"><span>.</span>双城生活</router-link>
            </p>
            <p>
              <router-link to="/"><span>.</span>微博：改变一切</router-link>
            </p>
            <p>
              <router-link to="/"><span>.</span> 缺宅男女</router-link>
            </p>
            <p>
              <router-link to="/"><span>.</span> 大年初四，小雪</router-link>
            </p>
            <p>
              <router-link to="/"><span>.</span>拆掉思维里的墙</router-link>
            </p>
            <p>
              <router-link to="/"><span>.</span>开讲啦</router-link>
            </p>
            <p>
              <router-link to="/"><span>.</span>怎么处理客户异议</router-link>
            </p>
            <p>
              <router-link to="/"
                ><span>.</span>20几岁学理财30岁后才有钱</router-link
              >
            </p>
          </div>
          <div class="cardSide Ctwo">
            <h2>点击排行</h2>
            <p>
              <router-link to="/"
                ><img src="../assets/imgs/b1.jpg" alt=""
              /></router-link>
            </p>
            <p>
              <router-link to="/"
                ><span>1</span> 客户的四种类型分析</router-link
              >
            </p>
            <p>
              <router-link to="/"><span>2</span> 如何让客户续费</router-link>
            </p>
            <p>
              <router-link to="/"
                ><span>3</span>阿里巴巴销售过程管理</router-link
              >
            </p>
            <p>
              <router-link to="/"
                ><span>4</span>销售三招快速找对关键人</router-link
              >
            </p>
            <p>
              <router-link to="/"
                ><span>5</span> Top sales必备的十个好习惯</router-link
              >
            </p>
            <p>
              <router-link to="/"
                ><span>6</span>销售“三断力”：判断力</router-link
              >
            </p>
            <p>
              <router-link to="/"
                ><span>7</span>创业初期该招聘无经验</router-link
              >
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //props: ["id", "gh", "dates", "count", "title"],
    inject:['reload'],
  data() {
  
    return {
      path:'',//具体文章路径，给具体文章点赞
      reverts: "", //回复内容
      revertsItme: [], //回复内容列表
      lookcontent: "查看更多评论",
      flags: 1, //查看更多评论
      flag: 0, //切换回复面板
      alt: "回复",
      id: "", //文章id
      gh: "", //文章内容
      dates: "", //文章时间
      count: "", //点赞数
      title: "", //文章简介
      input: "", //用户名
      textarea: "", //评论内容
      article: "",
      naveList: [],
      we: "",
      aj:null,//发送新的请求
      RelatedItem: [
        { name: "时空角智慧：破解中小企业老板的72个想不通" },
        { name: "李清照转" },
        { name: "或者" },
        { name: "小学学问" },
        { name: "最重要的是只有一件" },
        { name: "关海贼王观后感" },
      ], //相关文章列表评论
      randomItem: [],
      randomItems: [
        {
          imgSrc:
            "http://tva1.sinaimg.cn/large/007aKCWJgy1gl1fjcjqj7j305h03zdgh.jpg",
          title: "成长的骄傲与烦恼",
          content:
            "在所有的诗人中，我最喜欢的就是席慕容了，其次是泰戈尔。席慕容的诗很柔情，读的时候心里面都是软软的，暗自相思心底的某个人。",
        },
        {
          imgSrc:
            "http://tva1.sinaimg.cn/large/007aKCWJgy1gl1fjcjqj7j305h03zdgh.jpg",
          title: "成长的骄傲与烦恼",
          content:
            "在所有的诗人中，我最喜欢的就是席慕容了，其次是泰戈尔。席慕容的诗很柔情，读的时候心里面都是软软的，暗自相思心底的某个人。",
        },
        {
          imgSrc:
            "http://tva1.sinaimg.cn/large/007aKCWJgy1gl1fjcjqj7j305h03zdgh.jpg",
          title: "成长的骄傲与烦恼",
          content:
            "在所有的诗人中，我最喜欢的就是席慕容了，其次是泰戈尔。席慕容的诗很柔情，读的时候心里面都是软软的，暗自相思心底的某个人。",
        },
        {
          imgSrc:
            "http://tva1.sinaimg.cn/large/007aKCWJgy1gl1fjcjqj7j305h03zdgh.jpg",
          title: "成长的骄傲与烦恼",
          content:
            "在所有的诗人中，我最喜欢的就是席慕容了，其次是泰戈尔。席慕容的诗很柔情，读的时候心里面都是软软的，暗自相思心底的某个人。",
        },
      ], //随机图文
    };
  },
  computed: {
    // 解析器配置
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false, // 是否允许编辑
        toolbarsFlag: false,
        scrollStyle: true,
      };
      return data;
    },
  },
  
   created() {
    
    
  this.aj=async ()=>{
    //获取分类列表
    let { data } = await this.$http.get("http://localhost:8030/index/");
    this.naveList = data;
    console.log(this.naveList,"我是分类列表");
    console.log(this.id, "我是id","我是分类列表id");
    this.preFace = this.$route.query.gh;
    //根据路由查询文章详情
    let wz = await this.$http.get("http://localhost:8030/index/all", {
      params: {
        path: this.$route.path,
      },
    });
    if (wz.data.content) {
      this.id = wz.data.content.id;
      this.gh = wz.data.content.preFace;
      this.dates = wz.data.content.dates;
      this.count = wz.data.content.count;
      this.title = wz.data.content.title;
      this.path=wz.data.content.path;
    }
    console.log(wz, "我是详情页属性",this.path);
    //获取文章评论进行发送请求
    let path = this.$route.path;
    let itme = await this.$http.get(
      "http://localhost:8030/index/Currentcomment",
      {
        params: { path },
      }
    );
    this.randomItem = itme.data.itme;
  }
    this.aj()
    //路由跳转获取文章赞
   this.essayLike(this.$route.path)
  
  },
watch:{
$route(){
 
 this.aj()
}
},
  methods: {
    async essayLike(path){
    //文章点赞的格林时间时间
    var flag=new Date().getTime()+24*60*60*1000;
    let {data} =await this.$http.get('http://localhost:8030/index/essaylik',{
        params:{path,count:++this.count,flag}
      })
      if(data.status==1){
        this.count=data.mesge;
        this.$message({type:'success',message:"谢谢客官的赞赏，后续更新"})
      }else{
        console.log(data);
        this.count=data.mesge;
        this.$message({type:'warning',message:"谢谢，今天已再赏"})
      }
    },
    async giveLike(i, count, ii) {
      //点赞功能
      var flag=new Date().getTime()+24*60*60*1000;
  
      let { data } = await this.$http("http://localhost:8030/index/givelike", {
        params: {
          i,
          count: ++count,
          flag
        },
      });
      if (data.status == 1) {
     
       console.log(data,flag);
        this.randomItem.some((item, index) => {
          //如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
          if (item.id == i) {
            this.randomItem[index].count = data.data;
            //console.log(item.id==i,this.randomItem);
            document.cookie = `time${data.id}=${data.id};expires=${data.time}`;
            document.querySelectorAll(".el-icon-thumb")[ii].style.color =
              "blue";
           this.$message({type:"success",message:"谢谢客官赞赏"})
            return item.id == i;
          }
        });
      }else{
        this.count=data.data;
         document.querySelectorAll(".el-icon-thumb")[ii].style.color ="blue";
        console.log(data);
        this.$message({type:'warning',message:"谢谢，今天已再赏"})
      }
    },
    look() {
      //查看评论
      if (
        document.querySelectorAll(".reply").length == this.randomItem.length
      ) {
        this.lookcontent = "没有更多评论了";
      }

      this.flags = document.querySelectorAll(".reply").length + 1;
    },
    Puckup(index) {
      //回复面板默认display：none;
      if (!this.flag) {
        document.querySelectorAll(".reply")[index].style.display = "block";
        this.flag = !this.flag;
      } else {
        document.querySelectorAll(".reply")[index].style.display = "none";
        this.flag = !this.flag;
      }
    },
    async UserComment() {
      let hash = [];
      this.input == "" ? (this.input = "JOKER") : this.input; //判断用户是否有值
      if (this.textarea == "")
        return this.$message({ type: "error", message: "请填写内容" });
      let randoms = null;
      let i = 4;
      //生成hash值
      while (i) {
        randoms = Math.random() * 20 + 1;
        hash.push(parseInt(randoms));
        --i;
      }
      let hashNumber = hash.join("");
      let Uimg = `https://gravatar.loli.net/avatar/${hashNumber}?d=monsterid`; //用户图片地址
      let { data } = await this.$http.get(
        "http://localhost:8030/index/userComment",
        {
          params: {
            input: this.input,
            Uimg,
            textarea: this.textarea,
            path: this.$route.path,
          },
        }
      );
      this.randomItem = data.randomItem;
    },
    async revert(ix) {
      let hash = [];
      this.input == "" ? (this.input = "JOKER") : this.input; //判断用户是否有值
      if (this.reverts == "")return this.$message({ type: "error", message: "请填写内容" });
      let randoms = null;
      let i = 4;
      //生成hash值
      while (i) {
        randoms = Math.random() * 20 + 1;
        hash.push(parseInt(randoms));
        --i;
      }
      let hashNumber = hash.join("");
      let Uimg = `https://gravatar.loli.net/avatar/${hashNumber}?d=monsterid`; //用户图片地址
      let {data}=await this.$http.get('http://localhost:8030/index/usermesg',{
        params:{
          Uimg,
          ix,
          reverts:this.reverts,
          input:this.input
        }
      })
      if(data.status){
        this.$message({type:'success',message:'回复成功'});
        this.revertsItme=data.revertsItme;
        console.log(this.revertsItme);
      }
      console.log(data,12);
    
    },
  }
};
</script>

<style lang="less" scoped>
div > .el-row {
  /* background-color: black; */
  padding: 15px 0;
  & > .el-col:nth-child(3):hover {
    .directory {
      display: block;
    }
  }
}

.directory {
 
  display: none;
  width: 25rem;
  text-indent: 1rem;
  // 首行缩进
}
.mains {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  border-bottom: 1px solid #eee;
  padding: 25px 0 5px 0;
}
.newposts {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0 100px;
}

.postsItem > .postsItemList::after {
  content: "";
  display: block;
  height: 100%;
  clear: both;
}
.postsItemList > h2 {
  width: 80%;
  padding: 0 0 20px 0;
  display: inline-block;
  white-space: nowrap;

  font: 1rem "Microsoft YaHei", Arial, Helvetica, sans-serif;
}
.postsItem > .postsItemList {
  padding: 0 20px 0 0px;
  box-sizing: border-box;
  width: 75%;
  position: absolute;
}
@media only screen and (max-width: 767px) {
  .ItemLeft {
    width: 75%;
    div {
      min-width: 0;
    }
  }
  .introduce {
    width: 75%;
  }
}
.el-breadcrumb {
  display: flex;
  justify-content: flex-end;
}
.ItemsR {
  font-size: 1.2rem;
  display: inline-block;
  width: 5rem;
  border-bottom: 2px solid black;
  transition: width 1s;
}
.ItemsR:hover {
  width: 10rem;
}

.author {
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.author > p:nth-child(1) {
  height: 50px;
  width: 50px;
  min-width: 50px;
  margin-top: 5px;
  border-radius: 50%;
  background: url(http://tva1.sinaimg.cn/large/007aKCWJgy1gkx19e3zudj305z091n2b.jpg)
    no-repeat;
  background-size: 100%;
}
.author > p:nth-child(2) {
  position: relative;
  width: 100%;
  span {
    display: inline-block;
    padding-left: 16px;
    white-space: wrap;
  }
}
.introduce {
  padding: 20px 0;
  background-color: #f6f6f6;
  opacity: 0.8;
  color: #888888;
  font-size: 1rem;
  line-height: 1.6rem;

  position: relative;
  text-indent: 2rem;
  span {
    font-size: 1.1rem;
    color: black;
  }
}
.postsItemList > .ItemLeft > .Essay > .preface {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1.7rem;
}

.postsItem {
  position: relative;
  // display: flex;
  // justify-content: space-around;
  min-width: 500px;
  .ItemRight {
    position: absolute;
    right: 0;
    top: 0px;
    .cardSide {
      box-shadow: 0px 1px 5px blue;
    }
  }
}
.postsItem > .ItemRight > .cardSide {
  margin-bottom: 20px;
  width: 100%;
  border-radius: 3px;
  background-color: #2a2a2a;
  color: #eee;
  h2 {
    padding: 10px 0 20px 10px;
  }

  p {
    word-break: break-all;
    box-sizing: border-box;
    line-height: 2.1rem;
    padding: 0 20px 8px 20px;
    width: 17.18rem;
    font-size: 0.8rem;
  }
  .Icon {
    display: flex;
    justify-content: space-around;

    // span{
    //  width: 35px;
    //  height: 35px;
    //  line-height: 35px;
    //  text-align: center;
    //  margin: 0 10px 0 14px ;
    //  display:inline-block;
    // border-radius: 50%;
    // background-color: white;
    // }
    .item {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    & > span {
      width: 35px;
      height: 35px;

      .el-button {
        width: 35px;
        height: 35px;
        & > span > img {
          position: relative;
          left: -13px;
          top: -6px;
        }
      }
    }
    .item > span > img,
    a {
      position: relative;

      left: -13px;
      top: -6px;
    }
  }
}
.postsItem > .ItemRight > .Ctwo {
  background-color: white;
  color: black;
  h2 {
    padding: 10px;
    font-size: 16px;
    color: rgb(58, 56, 56);
  }
  h2::after {
    transition: all 0.5s linear;
    display: block;
    content: "";
    position: relative;
    bottom: 0;
    width: 65px;
    height: 2px;
    background-color: black;
  }
  h2:hover {
    &::after {
      width: 120px;
    }
  }
  p {
    span {
      display: inline-block;
      vertical-align: super;
      margin: 0 9px;
    }
    a {
      border-radius: 8px;
      overflow: hidden;
      text-overflow: ellipsis; //超出显示省略号
      white-space: nowrap; //不换行
      background-color: #f2f2f2;
      font-size: 0.8rem;
      color: black;
    }
    a:hover {
      box-shadow: 0 -3px 10px rgb(38, 23, 247);
    }
  }
}
.postsItem > .ItemRight > .Ctwo:nth-child(2) {
  h2 {
    height: 60px;
  }
}
.postsItem > .ItemRight > .Ctwo:nth-child(3) {
  a {
    background-color: white;
  }
}
.postsItem > .ItemRight > .Ctwo:nth-child(4) {
  p {
    span {
      width: 20px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      display: inline-block;

      background-color: orange;
      vertical-align: baseline;
    }
  }
  p:nth-of-type(1) {
    a:nth-child(1) {
      height: 142px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        transition: all 0.6s;
      }
    }
    a:hover > img {
      transform: scale(1.5);
    }
  }
}
// 网站说明样式
.webLinks {
  background-color: #f7f7f7;
  padding: 10px 20px;
  line-height: 1.8rem;
  border-left: 2px solid black;
  a {
    color: black;
    display: inline-block;
    width: 10rem;
  }
  .admire {
    width: 12rem;
    margin: 20px auto;
    background-color: #e2523a;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 3px;
    a {
      display: inline;
    }
  }
  p {
    margin: 10px 0;
    span {
      margin-right: 20px;
    }
  }
}
//相关文章样式
.Related {
  margin: 30px 0;
  background-color: white;
  overflow: hidden;
  ul {
    overflow: hidden;
    box-sizing: border-box; //ie盒子
    padding: 0 20px;
    // 设置list-style值是元素必须为块级元素
    li {
      margin-top: 8px;

      list-style: disc;
      float: left;
      width: 50%;
    }
  }
}
//随机图文
.Related {
  .random {
    float: left;
    li {
      width: 25%;
      list-style: none;
      P {
        padding: 15px 0 10px 0;
        img {
          width: 100%;
          height: 140px;
        }
      }
      P:nth-child(3) {
        color: #666;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        line-height: 2.2rem;
      }
    }
  }
  // 文章评论
  .comments {
    margin-top: 20px;
    border-bottom: 1px dashed black;
    li {
      .reply.el-row {
        //回复面板
        display: none;
        .el-button--medium {
          height: 40px;
        }
        
      }
      div{
          .comments{
          display: flex;
         
         flex-wrap: wrap;
         
        }
        }
      list-style: none;
      margin-bottom: 15px;
      width: 90%;
      i {
        margin-right: 30px;
        cursor: pointer;
      }
      i:nth-child(2) {
        height: 40px;
      }
    }
    li:nth-child(1) {
      border-radius: 50%;
      width: 5rem;
      height: 5rem;
      img {
        border-radius: 50%;
      }
    }
    li:nth-child(2) {
      display: flex;
      justify-content: space-between;
    }
     li:nth-child(4){
       float: right;
     }
  }
  .commentsP {
    font-size: 1.1rem;
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    color: #a9a6a6;
    justify-content: space-between;
    span {
      color: #e14514;
      line-height: 50px;
      cursor: pointer;
    }
  }
}
</style>